<template>
	<div>
		<tab-bar>
			<tab-bar-item :path="'/home'">
				<template v-slot:item-icon>
					<img src="~@/assets/png/tabbar/home.svg" alt="">
				</template>
				<template v-slot:item-icon-active>
					<img src="~@/assets/png/tabbar/home-a.svg" alt="">
				</template>
				<template v-slot:item-text>
					<div>首页</div>
				</template>
			</tab-bar-item>
			<tab-bar-item :path="'/category'" styleColor="yellow">
				<template v-slot:item-icon>
					<img src="~@/assets/png/tabbar/category.svg" alt="">
				</template>
				<template v-slot:item-icon-active>
					<img src="~@/assets/png/tabbar/category-a.svg" alt="">
				</template>
				<template v-slot:item-text>
					<div>分类</div>
				</template>
			</tab-bar-item>
			<tab-bar-item :path="'/cart'">
				<template v-slot:item-icon>
					<img src="~@/assets/png/tabbar/shop-cart.svg" alt="">
				</template>
				<template v-slot:item-icon-active>
					<img src="~@/assets/png/tabbar/shop-cart-a.svg" alt="">
				</template>
				<template v-slot:item-text>
					<div>购物车</div>
				</template>
			</tab-bar-item>
			<tab-bar-item :path="'/profile'">
				<template v-slot:item-icon>
					<img src="~@/assets/png/tabbar/profile.svg" alt="">
				</template>
				<template v-slot:item-icon-active>
					<img src="~@/assets/png/tabbar/profile-a.svg" alt="">
				</template>
				<template v-slot:item-text>
					<div>我的</div>
				</template>
			</tab-bar-item>
		</tab-bar>
	</div>
</template>

<script>
	import TabBar from '@/components/common/tabbar/TabBar';
	import TabBarItem from '@/components/common/tabbar/TabBarItem';
	export default {
		name: 'MainTabBar',
		components: {
			TabBar,
			TabBarItem
		}
	}
</script>

<style>
</style>
